// main.qml
// QSlider 适配到 Qt for HarmonyOS
// RGB 颜色选择器：使用三个 Slider 控制红、绿、蓝三个颜色通道

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 0 ? Screen.width : 800
    height: Screen.height > 0 ? Screen.height : 600
    visible: true
    title: "QSlider - RGB 颜色选择器"
    flags: Qt.Window | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint
    
    // RGB 颜色值（0-255）
    property int redValue: 128
    property int greenValue: 128
    property int blueValue: 128
    
    // 初始化
    Component.onCompleted: {
        console.log("QSlider: ApplicationWindow onCompleted")
        
        // ⚠️ 关键：确保窗口激活并获得焦点，这样才能接收事件
        console.log("QSlider: Requesting window activation")
        root.show()
        root.requestActivate()
        console.log("QSlider: Window active:", root.active)
        
        // 初始化颜色显示
        updateColor()
    }
    
    // 更新颜色显示函数
    function updateColor() {
        var colorStr = "rgb(" + redValue + "," + greenValue + "," + blueValue + ")"
        console.log("QSlider: RGB颜色更新:", colorStr)
        colorDisplay.color = Qt.rgba(redValue / 255.0, greenValue / 255.0, blueValue / 255.0, 1.0)
    }
    
    Rectangle {
        id: contentRect
        anchors.fill: parent
        color: "#F5F5F5"
        
        Column {
            anchors.fill: parent
            anchors.margins: 50
            spacing: 40
            
            // 颜色显示区域
            Rectangle {
                id: colorDisplay
                width: Math.min(parent.width, 400)
                height: Math.min(parent.width, 400)
                anchors.horizontalCenter: parent.horizontalCenter
                radius: 20
                border.color: "#CCCCCC"
                border.width: 3
                color: Qt.rgba(redValue / 255.0, greenValue / 255.0, blueValue / 255.0, 1.0)
                
                // 添加阴影效果
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: -5
                    radius: parent.radius + 5
                    color: "transparent"
                    border.color: "#E0E0E0"
                    border.width: 1
                    z: -1
                }
            }
            
            // RGB 控制区域
            Column {
                width: parent.width
                spacing: 30
                
                // 红色 Slider
                Row {
                    width: parent.width
                    spacing: 20
                    height: 80
                    
                    Text {
                        text: "红色"
                        width: 80
                        height: parent.height
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 32
                        font.bold: true
                        color: "#CC0000"
                    }
                    
                    Rectangle {
                        width: 100
                        height: parent.height
                        color: "white"
                        border.color: redValueInput.activeFocus ? "#CC0000" : "#CCCCCC"
                        border.width: redValueInput.activeFocus ? 3 : 2
                        radius: 8
                        
                        TextInput {
                            id: redValueInput
                            anchors.fill: parent
                            anchors.margins: 8
                            verticalAlignment: TextInput.AlignVCenter
                            horizontalAlignment: TextInput.AlignHCenter
                            font.pixelSize: 32
                            color: "#333333"
                            selectByMouse: true
                            inputMethodHints: Qt.ImhDigitsOnly
                            validator: IntValidator { bottom: 0; top: 255 }
                            
                            text: redValue.toString()
                            
                            onTextChanged: {
                                var numValue = parseInt(text)
                                if (!isNaN(numValue) && numValue >= 0 && numValue <= 255) {
                                    redValue = numValue
                                    redSlider.value = numValue
                                    updateColor()
                                }
                            }
                            
                            onEditingFinished: {
                                var numValue = parseInt(text)
                                if (isNaN(numValue) || numValue < 0) {
                                    text = "0"
                                    redValue = 0
                                } else if (numValue > 255) {
                                    text = "255"
                                    redValue = 255
                                } else {
                                    redValue = numValue
                                }
                                redSlider.value = redValue
                                updateColor()
                            }
                        }
                    }
                    
                    Slider {
                        id: redSlider
                        width: parent.width - 200
                        height: parent.height
                        from: 0
                        to: 255
                        value: redValue
                        stepSize: 1
                        
                        background: Rectangle {
                            x: redSlider.leftPadding
                            y: redSlider.topPadding + redSlider.availableHeight / 2 - height / 2
                            implicitWidth: 200
                            implicitHeight: 8
                            width: redSlider.availableWidth
                            height: implicitHeight
                            radius: 4
                            color: "#E0E0E0"
                            
                            Rectangle {
                                width: redSlider.visualPosition * parent.width
                                height: parent.height
                                color: "#CC0000"
                                radius: 4
                            }
                        }
                        
                        handle: Rectangle {
                            x: redSlider.leftPadding + redSlider.visualPosition * (redSlider.availableWidth - width)
                            y: redSlider.topPadding + redSlider.availableHeight / 2 - height / 2
                            implicitWidth: 30
                            implicitHeight: 30
                            radius: 15
                            color: redSlider.pressed ? "#AA0000" : "#CC0000"
                            border.color: "#FFFFFF"
                            border.width: 2
                            
                            Rectangle {
                                anchors.centerIn: parent
                                width: 10
                                height: 10
                                radius: 5
                                color: "white"
                            }
                        }
                        
                        onValueChanged: {
                            redValue = Math.round(value)
                            if (!redValueInput.activeFocus) {
                                redValueInput.text = redValue.toString()
                            }
                            updateColor()
                        }
                    }
                }
                
                // 绿色 Slider
                Row {
                    width: parent.width
                    spacing: 20
                    height: 80
                    
                    Text {
                        text: "绿色"
                        width: 80
                        height: parent.height
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 32
                        font.bold: true
                        color: "#00CC00"
                    }
                    
                    Rectangle {
                        width: 100
                        height: parent.height
                        color: "white"
                        border.color: greenValueInput.activeFocus ? "#00CC00" : "#CCCCCC"
                        border.width: greenValueInput.activeFocus ? 3 : 2
                        radius: 8
                        
                        TextInput {
                            id: greenValueInput
                            anchors.fill: parent
                            anchors.margins: 8
                            verticalAlignment: TextInput.AlignVCenter
                            horizontalAlignment: TextInput.AlignHCenter
                            font.pixelSize: 32
                            color: "#333333"
                            selectByMouse: true
                            inputMethodHints: Qt.ImhDigitsOnly
                            validator: IntValidator { bottom: 0; top: 255 }
                            
                            text: greenValue.toString()
                            
                            onTextChanged: {
                                var numValue = parseInt(text)
                                if (!isNaN(numValue) && numValue >= 0 && numValue <= 255) {
                                    greenValue = numValue
                                    greenSlider.value = numValue
                                    updateColor()
                                }
                            }
                            
                            onEditingFinished: {
                                var numValue = parseInt(text)
                                if (isNaN(numValue) || numValue < 0) {
                                    text = "0"
                                    greenValue = 0
                                } else if (numValue > 255) {
                                    text = "255"
                                    greenValue = 255
                                } else {
                                    greenValue = numValue
                                }
                                greenSlider.value = greenValue
                                updateColor()
                            }
                        }
                    }
                    
                    Slider {
                        id: greenSlider
                        width: parent.width - 200
                        height: parent.height
                        from: 0
                        to: 255
                        value: greenValue
                        stepSize: 1
                        
                        background: Rectangle {
                            x: greenSlider.leftPadding
                            y: greenSlider.topPadding + greenSlider.availableHeight / 2 - height / 2
                            implicitWidth: 200
                            implicitHeight: 8
                            width: greenSlider.availableWidth
                            height: implicitHeight
                            radius: 4
                            color: "#E0E0E0"
                            
                            Rectangle {
                                width: greenSlider.visualPosition * parent.width
                                height: parent.height
                                color: "#00CC00"
                                radius: 4
                            }
                        }
                        
                        handle: Rectangle {
                            x: greenSlider.leftPadding + greenSlider.visualPosition * (greenSlider.availableWidth - width)
                            y: greenSlider.topPadding + greenSlider.availableHeight / 2 - height / 2
                            implicitWidth: 30
                            implicitHeight: 30
                            radius: 15
                            color: greenSlider.pressed ? "#00AA00" : "#00CC00"
                            border.color: "#FFFFFF"
                            border.width: 2
                            
                            Rectangle {
                                anchors.centerIn: parent
                                width: 10
                                height: 10
                                radius: 5
                                color: "white"
                            }
                        }
                        
                        onValueChanged: {
                            greenValue = Math.round(value)
                            if (!greenValueInput.activeFocus) {
                                greenValueInput.text = greenValue.toString()
                            }
                            updateColor()
                        }
                    }
                }
                
                // 蓝色 Slider
                Row {
                    width: parent.width
                    spacing: 20
                    height: 80
                    
                    Text {
                        text: "蓝色"
                        width: 80
                        height: parent.height
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 32
                        font.bold: true
                        color: "#0000CC"
                    }
                    
                    Rectangle {
                        width: 100
                        height: parent.height
                        color: "white"
                        border.color: blueValueInput.activeFocus ? "#0000CC" : "#CCCCCC"
                        border.width: blueValueInput.activeFocus ? 3 : 2
                        radius: 8
                        
                        TextInput {
                            id: blueValueInput
                            anchors.fill: parent
                            anchors.margins: 8
                            verticalAlignment: TextInput.AlignVCenter
                            horizontalAlignment: TextInput.AlignHCenter
                            font.pixelSize: 32
                            color: "#333333"
                            selectByMouse: true
                            inputMethodHints: Qt.ImhDigitsOnly
                            validator: IntValidator { bottom: 0; top: 255 }
                            
                            text: blueValue.toString()
                            
                            onTextChanged: {
                                var numValue = parseInt(text)
                                if (!isNaN(numValue) && numValue >= 0 && numValue <= 255) {
                                    blueValue = numValue
                                    blueSlider.value = numValue
                                    updateColor()
                                }
                            }
                            
                            onEditingFinished: {
                                var numValue = parseInt(text)
                                if (isNaN(numValue) || numValue < 0) {
                                    text = "0"
                                    blueValue = 0
                                } else if (numValue > 255) {
                                    text = "255"
                                    blueValue = 255
                                } else {
                                    blueValue = numValue
                                }
                                blueSlider.value = blueValue
                                updateColor()
                            }
                        }
                    }
                    
                    Slider {
                        id: blueSlider
                        width: parent.width - 200
                        height: parent.height
                        from: 0
                        to: 255
                        value: blueValue
                        stepSize: 1
                        
                        background: Rectangle {
                            x: blueSlider.leftPadding
                            y: blueSlider.topPadding + blueSlider.availableHeight / 2 - height / 2
                            implicitWidth: 200
                            implicitHeight: 8
                            width: blueSlider.availableWidth
                            height: implicitHeight
                            radius: 4
                            color: "#E0E0E0"
                            
                            Rectangle {
                                width: blueSlider.visualPosition * parent.width
                                height: parent.height
                                color: "#0000CC"
                                radius: 4
                            }
                        }
                        
                        handle: Rectangle {
                            x: blueSlider.leftPadding + blueSlider.visualPosition * (blueSlider.availableWidth - width)
                            y: blueSlider.topPadding + blueSlider.availableHeight / 2 - height / 2
                            implicitWidth: 30
                            implicitHeight: 30
                            radius: 15
                            color: blueSlider.pressed ? "#0000AA" : "#0000CC"
                            border.color: "#FFFFFF"
                            border.width: 2
                            
                            Rectangle {
                                anchors.centerIn: parent
                                width: 10
                                height: 10
                                radius: 5
                                color: "white"
                            }
                        }
                        
                        onValueChanged: {
                            blueValue = Math.round(value)
                            if (!blueValueInput.activeFocus) {
                                blueValueInput.text = blueValue.toString()
                            }
                            updateColor()
                        }
                    }
                }
            }
            
            // RGB 值显示
            Rectangle {
                width: parent.width
                height: 60
                color: "white"
                radius: 10
                border.color: "#CCCCCC"
                border.width: 2
                
                Text {
                    anchors.centerIn: parent
                    text: "RGB(" + redValue + ", " + greenValue + ", " + blueValue + ")"
                    font.pixelSize: 28
                    font.bold: true
                    color: "#333333"
                }
            }
        }
    }
}
